<template>
  <transition name="fade">
    <div class="overlay-container" v-show="open" :style="{ zIndex: app.zIndex }">
      <!-- 遮罩层 -->
      <!--      <div class="overlay-mask" @click.self="handleMaskClick"></div>-->

      <!-- 浮层内容 -->
      <div
        class="overlay-content"
        :style="contentStyle"
        :class="{ maximize: app.maximized }"
        v-madoka-move="{ enabled: moveable, onMove}"
        @mousedown="onWindowClick"
        v-madoka-resize="{ enabled: moveable, onResize}"
      >
        <div class="overlay-header" @dblclick="onMaxOrRestore">
          <slot name="header">
            <h3 draggable="false">{{ app.title }}</h3>
          </slot>
          <div class="icon-group">
            <div class="icon" @click="close">
              <v-icon :icon="mdiWindowMinimize"/>
            </div>
            <div class="icon" @click="onMaxOrRestore">
              <v-icon :icon="app.maximized ? mdiWindowRestore : mdiWindowMaximize" />
            </div>
            <div class="icon close-icon" @click="destroy">
              <v-icon :icon="mdiClose" style="cursor: default" />
            </div>
          </div>
        </div>

        <div class="overlay-body">
          <slot />
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { useWindowStore, type Window } from "@/components/windows/actives/activeWindow.ts";
import { mdiClose, mdiWindowMaximize, mdiWindowMinimize, mdiWindowRestore } from "@mdi/js";
import type { CSSProperties } from "vue";

const props = withDefaults(
  defineProps<{
    appKey: string;
    id: string;
    open: boolean;
    app: Window;
  }>(),
  {},
);
const moveable = () => !props.app.maximized
const onMove = (x: number, y: number) => {
  props.app.x = x;
  props.app.y = y;
};
const onResize = (v: { width: number; height: number, newLeft: number, newTop: number }) => {
  const app = props.app;
  app.width = v.width;
  app.height = v.height;
  app.x = v.newLeft
  app.y = v.newTop

};

const onMaxOrRestore = () => {
  props.app.maximized = !props.app.maximized;
};

const emit = defineEmits(["update:show", "close"]);

const onWindowClick = () => {
  if (useWindowStore.nextZIndex === props.app.zIndex + 1) return;
  props.app.zIndex = useWindowStore.nextZIndex;
  useWindowStore.nextZIndex++;
};

const contentStyle = computed(() => {
  if (props.app.maximized) {
    return {
      position: "fixed",
      width: "100vw",
      height: "100vh",
    } as CSSProperties;
  }
  return {
    width: `${props.app.width}px`,
    height: `${props.app.height}px`,
    left: `${props.app.x}px`,
    minWidth: `${props.app.minWidth}px`,
    minHeight: `${props.app.minHeight}px`,
    top: `${props.app.y}px`,
    zIndex: props.app.zIndex,
  } as CSSProperties;
});
const destroy = () => {
  useWindowStore.saveHabits(props.app);
  useWindowStore.closeWindow(props.id);
};
const close = () => {
  emit("update:show", false);
  emit("close");
  useWindowStore.minimizeWindow(props.id);
};

const handleEscape = (e: any) => {
  if (e.key === "Escape") {
    close();
  }
};

onMounted(() => {
  document.addEventListener("keyup", handleEscape);
});

onBeforeUnmount(() => {
  document.removeEventListener("keyup", handleEscape);
});
</script>

<style scoped lang="scss">
@use "@/components/windows/styles/index.scss";

.overlay-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.overlay-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.overlay-content {
  border: 1px solid;
  position: absolute;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: auto;
}

$header__length: 50px;
.overlay-header {
  display: flex;
  justify-content: space-between;
  height: $header__length;
  align-items: center;
  margin-bottom: 15px;
  user-select: none;

  .icon-group {
    height: 100%;
    display: flex;

    .icon {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1 / 1;

      &:hover {
        background: rgba(209, 209, 209, 0.8);
      }
    }

    .close-icon {
      &:hover {
        background: red;
        color: white;
      }
    }
  }
}

.maximize {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active .overlay-content,
.fade-leave-active .overlay-content {
  transition: transform 0.3s;
}

.fade-enter-from .overlay-content,
.fade-leave-to .overlay-content {
  transform: scale(0.95);
}
</style>
